<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-xs-12">
          <ul class="error-messages">
            <li>That title is required</li>
          </ul>

          <form>
            <fieldset>
              <fieldset class="form-group">
                <input type="text" class="form-control form-control-lg" placeholder="Article Title"
                  v-model="creat_article.article.title" />
              </fieldset>
              <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="What's this article about?"
                  v-model="creat_article.article.description" />
              </fieldset>
              <fieldset class="form-group">
                <textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"
                  v-model="creat_article.article.body"></textarea>
              </fieldset>
              <fieldset class="form-group">
                <input type="text" class="form-control" placeholder="Enter tags" v-model="tagname"
                  @keyup.enter="addTags()" />
                <div class="tag-list" >
                  <span class="tag-default tag-pill" v-for="(tag, index) in creat_article.article.tagList"> <i class="ion-close-round" @click.prevent="delTags(index)"></i> {{ tag }} </span>
                </div>
              </fieldset>
              <button class="btn btn-lg pull-xs-right btn-primary" type="button" @click.prevent="publish()">
                Publish Article
              </button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import type { ArticleCreateReq, SingleArticle } from '../models';
import axios from '../utils/request';
import { useRoute, useRouter } from 'vue-router';

let route = useRoute();
let router = useRouter();
let creat_article = ref<ArticleCreateReq>({
  article: {
    title: '',
    description: '',
    body: '',
    tagList: []
  }
})
let single_article = ref<SingleArticle>({
  article: {
    slug: '',
    title: '',
    description: '',
    body: '',
    tagList: [],
    createdAt: '',
    updatedAt: '',
    favorited: false,
    favoritesCount: 0,
    author: {
      username: '',
      bio: '',
      image: '',
      following: false
    }
  }
})

let tagname = ref<string>('');

function addTags() {
  let index = creat_article.value.article.tagList.findIndex(x => x === tagname.value);
  if (index < 0) {
    creat_article.value.article.tagList.push(tagname.value);
  }
  tagname.value = '';
}
function delTags(index: number) {
  creat_article.value.article.tagList.splice(index, 1);
}

function publish() {
  if (route.params.slug !== undefined) {
    axios.put(`/articles/${route.params.slug}`, creat_article.value).then(res => {
      single_article.value = res.data;
      router.push({ name: 'article', params: { slug: single_article.value.article.slug } })
      // alert(login_rsp.value.user.token)
    })
  } else {
    axios.post('/articles', creat_article.value).then(res => {
      single_article.value = res.data;
      router.push({ name: 'article', params: { slug: single_article.value.article.slug } })
      // alert(login_rsp.value.user.token)
    })
  }

}
onMounted(() => {
  if (route.params.slug !== undefined) {
    axios.get(`/articles/${route.params.slug}`).then(res => {
      single_article.value = res.data;
      creat_article.value.article.title = single_article.value.article.title;
      creat_article.value.article.body = single_article.value.article.body;
      creat_article.value.article.description = single_article.value.article.description;
      creat_article.value.article.tagList = single_article.value.article.tagList;
      // console.log(single_article.value.article.body);
      // console.log(res.data);
    })
  }
})
</script>
<style scoped></style>
